define( [
		'module',
		'backbone',
		'marionette',
		'text!templates/simpleItem.html', 
		],
function( module, Backbone, Marionette, ItemHTML ) {
	console.log("Loading module " + module.id + " from " + module.uri + "...");

	var GridRow = Backbone.Marionette.ItemView.extend({
//		template: "#row-template",
//		tagName: "tr"
//		template: "#item-view",
		template: undefined,
		tagName:"div",
		className:"narrowList",

		initialize: function() {
			console.log("GridRow: initialize - entry");
			this.template = _.template(ItemHTML)
		},
		/* get the template from external file, do not polute
		 * the main page with template snippets
		 */

		showDetail:function(e) {
			if( window.App.O[1] != undefined ) {
				window.App.O[1].removeAttribute('style');
				window.App.O[2].setAttribute( 'style', 'background: #6fc1e6');
			} 
			window.App.O[1]=e.currentTarget.parentNode;
			
			/*
			for( i=1; i<=e.currentTarget.parentNode.childElementCount;i++) {
				if ( e.currentTarget.parentNode.childNodes[i].type == "submit" ) {
					window.App.O[2]=e.currentTarget.parentNode.childNodes[i];
					e.currentTarget.parentNode.childNodes[i].setAttribute('style', 'background: #ffffff');
				}
			}
			*/

			var array = e.currentTarget.parentNode.childNodes;
			for( var entry in array ) {
				if ( array[entry].tagName == "BUTTON" ) {
					window.App.O[2]=array[entry];
					array[entry].setAttribute('style', 'background: #ffffff');
				}
			}

			e.currentTarget.parentNode.setAttribute('style', 'background-color: #6fc1e6');
			// console.log(this.model.attributes.coverImage);
			$('#detail_view')[0].setAttribute('src',this.model.attributes.coverImage);
		},

		events: {
			"click .showDetailView":"showDetail", 						// click the button in the right on the item
			"click .clickableNarrowListItem":"showDetail" 			// click the item (is better that the button)
		}
	});

	return GridRow;
});
